import React, { useEffect, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import '../index.css';

const ApiDocumentation = () => {
  const [markdownContent, setMarkdownContent] = useState('');

  useEffect(() => {
    fetch(`${process.env.PUBLIC_URL}/api接口文档.md`)
      .then((response) => response.text())
      .then((text) => setMarkdownContent(text));
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <h2 style={{ fontSize: '24px', color: '#333', textAlign: 'left' }}>API 接口文档</h2>
      <div className="markdown-body">
        <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdownContent}</ReactMarkdown>
      </div>
    </div>
  );
};

export default ApiDocumentation; 